<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Captions Event Sample</title>
        <script src="../../contrib/videojs-vtt.js/vtt.min.js"></script>
        <script
            class="code"
            src="../../contrib/akamai/controlbar/ControlBar.js"
        ></script>
        <script src="../../dist/modern/umd/dash.all.debug.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
        <link href="../lib/main.css" rel="stylesheet" />

        <link
            rel="stylesheet"
            href="../../contrib/akamai/controlbar/controlbar.css"
        />

        <style>
            video {
                width: 100%;
            }

            .dash-video-player {
                position: relative; /* This position relative is needed to position the menus */
                margin: 0 auto;
                line-height: 1;
            }
        </style>

        <script class="code">
            var CAPTION_URL =
                     "https://dash.akamaized.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1_https.mpd",
                video,
                player;

            function init() {
                var url = CAPTION_URL,

                video = document.querySelector("video");

                player = dashjs.MediaPlayer().create();
                player.updateSettings({
                    streaming: {
                        text: {
                            dispatchForManualRendering: true
                        }
                    }
                })
                player.initialize(video, url, true);

                player.on("playbackPaused", function (e) {
                    console.log("playbackPaused");
                });
                player.on("cueEnter", function (e) {
                    console.log("cueEnter", e);
                    const subtitle = document.createElement("p")
                    subtitle.setAttribute("id", "subtitle-" + e.cueID)
                    subtitle.innerHTML = e.text;
                    document.getElementById("subtitles").appendChild(subtitle);
                });
                player.on("cueExit", function (e) {
                    console.log("cueExit ", e);
                    document.getElementById("subtitle-" + e.cueID).remove();
                });

                controlbar = new ControlBar(player);
                controlbar.initialize();
            }
        </script>
    </head>
    <body>
        <main>
            <div class="container py-4">
                <header class="pb-3 mb-4 border-bottom">
                    <img
                        class=""
                        src="../lib/img/dashjs-logo.png"
                        width="200"
                    />
                </header>
                <div class="row">
                    <div class="col-md-4">
                        <div class="h-50 p-5 bg-light border rounded-3">
                            <h3>Subtitle Event Handling</h3>
                            <p>
                                Example showing how to consume subtitle events raised by
                                dash.js. This way you can render the subtitles yourself.
                            </p>
                        </div>
                        <div class="h-45 mt-5 p-5 bg-light border rounded-3">
                            <h4>Current Subtitle</h4>
                            <div id="subtitles">

                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="dash-video-player code">
                            <div class="videoContainer" id="videoContainer">
                                <video preload="auto" autoplay></video>
                                <div
                                    id="videoController"
                                    class="video-controller unselectable"
                                >
                                    <div
                                        id="playPauseBtn"
                                        class="btn-play-pause"
                                        title="Play/Pause"
                                    >
                                        <span
                                            id="iconPlayPause"
                                            class="icon-play"
                                        ></span>
                                    </div>
                                    <span id="videoTime" class="time-display"
                                        >00:00:00</span
                                    >
                                    <div
                                        id="fullscreenBtn"
                                        class="btn-fullscreen control-icon-layout"
                                        title="Fullscreen"
                                    >
                                        <span
                                            class="icon-fullscreen-enter"
                                        ></span>
                                    </div>
                                    <div
                                        id="bitrateListBtn"
                                        class="control-icon-layout"
                                        title="Bitrate List"
                                    >
                                        <span class="icon-bitrate"></span>
                                    </div>
                                    <input
                                        type="range"
                                        id="volumebar"
                                        class="volumebar"
                                        value="1"
                                        min="0"
                                        max="1"
                                        step=".01"
                                    />
                                    <div
                                        id="muteBtn"
                                        class="btn-mute control-icon-layout"
                                        title="Mute"
                                    >
                                        <span
                                            id="iconMute"
                                            class="icon-mute-off"
                                        ></span>
                                    </div>
                                    <div
                                        id="trackSwitchBtn"
                                        class="control-icon-layout"
                                        title="A/V Tracks"
                                    >
                                        <span class="icon-tracks"></span>
                                    </div>
                                    <div
                                        id="captionBtn"
                                        class="btn-caption control-icon-layout"
                                        title="Closed Caption"
                                    >
                                        <span class="icon-caption"></span>
                                    </div>
                                    <span
                                        id="videoDuration"
                                        class="duration-display"
                                        >00:00:00</span
                                    >
                                    <div class="seekContainer">
                                        <div
                                            id="seekbar"
                                            class="seekbar seekbar-complete"
                                        >
                                            <div
                                                id="seekbar-buffer"
                                                class="seekbar seekbar-buffer"
                                            ></div>
                                            <div
                                                id="seekbar-play"
                                                class="seekbar seekbar-play"
                                            ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="code-output"></div>
                    </div>
                </div>
                <footer class="pt-3 mt-4 text-muted border-top">
                    &copy; DASH-IF
                </footer>
            </div>
        </main>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                init();
            });
        </script>
        <script src="../highlighter.js"></script>
    </body>
</html>
